/* 
<div id="app">Hello{{message}}<h1></h1></div>

render() {
  // _c解析标签 _v解析文本 _s解析插值
  return _c('div', {id: app, style: {}}, _v('hello'+ _s(msg)), _c)
}

*/
var defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g; // {{}}

// 处理属性
function genProps(attrs) {
  let str = ''
  // attrs 是对象
  for(let i = 0; i < attrs.length; i++) {
    let attr = attrs[i]
    // 判断是否是行内样式
    // {name: 'style', value: 'color: brown;'}
    if(attr.name === 'style') {
      let obj = {}
      attr.value.split(';').forEach(item => {
        let [key, val] = item.split(':')
        obj[key] = val
      });
      attr.value = obj
    }
    // 拼接
    str += `${attr.name}: ${JSON.stringify(attr.value)},`
  }
  return `{${str.slice(0, -1)}}`
}

// 处理子节点
function genChildren(el) {
  let children = el.children
  if(children) {
    return children.map(child => gen(child)).join(',')
  }
}

function gen(node) {
  // 1元素  3文本
  if(node.type === 1) {
    return generate(node)
  } else{
    // 分辨是单纯文本 还是 插值表达式
    let text = node.text
    if(!defaultTagRE.test(text)) {
      // 纯文本
      return `_v(${JSON.stringify(text)})`
    }
    // 插值表达式 {{}}
    let tokens = []
    let lastIndex = defaultTagRE.lastIndex = 0 // 相当于重置正则的校验规则
    let match
    while(match = defaultTagRE.exec(text)) {
      // console.log('match', match);
      // 测试{{message}} 
      let index = match.index 
      if(index > lastIndex) {
        // 添加内容
        tokens.push(JSON.stringify(text.slice(lastIndex,index)))
      }
      tokens.push(`_s(${match[1].trim()})`)
      lastIndex = index + match[0].length
    }
    // 判断是否还有内容
    if(lastIndex < text.length) {
      tokens.push(JSON.stringify(text.slice(lastIndex)))
    }
    return `_v(${tokens.join('+')})`
  }
}

export function generate(el) {
  // console.log('el', el);
  // 注意属性 { id: app, style: { color: red } }
  let children = genChildren(el)
  console.log('children', children);
  let code = `_c('${el.tag}', ${el.attrs.length ? `${genProps(el.attrs)}`: 'null'}${children ? `,${children}` : ''})`
  console.log('code', code);
  return code
}